<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { GlobalThemeOverrides } from 'naive-ui'
import { darkTheme, lightTheme } from 'naive-ui'
import Message from '@/components/Messaage.vue'
import DialogGlobal from '@/components/DialogGlobal.vue'

const theme = ref({})
const themeMedia = window.matchMedia("(prefers-color-scheme: dark)"); // 是深色
const themeOverrides: GlobalThemeOverrides = {
	common: {
		// primaryColor: '#2C786C'
	},
}

onMounted(() => {
	setTheme(themeMedia)
})

themeMedia.addEventListener('change', (e) => {
	setTheme(e)
});

function setTheme(e: any) {
	if (e.matches) {
		theme.value = darkTheme
	} else {
		theme.value = lightTheme
	}
}
</script>

<template>
	<n-config-provider :theme="theme" :theme-overrides="themeOverrides">
		<n-element>
			<n-message-provider>
				<n-dialog-provider>
					<n-notification-provider>
						<n-loading-bar-provider>
							<Message/>
							<DialogGlobal/>
							<RouterView/>
						</n-loading-bar-provider>
					</n-notification-provider>
				</n-dialog-provider>
			</n-message-provider>
		</n-element>
	</n-config-provider>
</template>
<style lang="less">
.n-element {
	height: 100%;
	overflow: hidden;
}
</style>
